<template>
  <view class="yu-datetime-picker">
    <view class="time" v-if="showValue">
      <view class="time_info">
        {{ todayDate == currentDate ? '今天' : currentDate }} {{ time }}
      </view>
    </view>
    <view class="yu-datetime-view">
      <picker-view
        :indicator-style="itemHeight"
        :value="dateValues"
        @change="bindDateChange"
        indicator-class="picker-box"
      >
        <picker-view-column class="yu-picker-column">
          <view class="yu-datetime-item" v-for="(item, index) in dates" :key="index">{{
            item.label
          }}</view>
        </picker-view-column>
        <picker-view-column class="yu-picker-column1">
          <view class="yu-datetime-item" v-for="(item, index) in hours" :key="index"
            >{{ item }}时</view
          >
        </picker-view-column>
        <picker-view-column class="yu-picker-column1">
          <view class="yu-datetime-item" v-for="(item, index) in minutes" :key="index"
            >{{ item }}分</view
          >
        </picker-view-column>
      </picker-view>
    </view>
    <view class="btnBox">
      <view class="con_btn" @click="confirm()">确认</view>
    </view>
  </view>
</template>

<script setup>
import { nextTick, ref, onMounted, computed, watch } from 'vue'
import dayjs from 'dayjs'
const props = defineProps({
  value: {
    type: String,
    default: '',
  },
  showValue: {
    type: Boolean,
    default: true,
  },
})

import { formatDate, showToast } from '@/utils'
const dates = ref([])
const hours = ref([])
const minutes = ref([])
const time = ref('')
const dateValues = ref([1, 1, 1])
const itemHeight = ref(`height: 88rpx`)
const emit = defineEmits(['confirm', 'cancel', 'changeTime'])
const visible = ref(true)
const indicatorStyle = ref('')
const todayDate = ref('')
const currentDate = ref('')
const confirm = () => {
  emit('confirm', { time: `${currentDate.value} ${time.value}` })
}

const cancel = () => {
  // emit('cancel')
}
onMounted(async () => {
  console.log(todayDate.value, 111)
  dates.value = await getLastYearToTodayDates()
  const date = new Date()
  let res = await init()
  console.log(props.value)
  if (props.value) {
    let str = props.value.split(' ')
    let str1 = str[1].split(':')
    time.value = str[1]
    let index1 = dates.value.findIndex((v) => v.value == str[0])
    let index2 = hours.value.findIndex((v) => v == str1[0])
    let index3 = minutes.value.findIndex((v) => v == str1[1])
    currentDate.value = str[0]
    nextTick((_) => {
      dateValues.value = [index1, index2, index3]
    })
    console.log(index1)
  } else {
    // time.value = dayjs().format("HH:mm")
  }
})
async function init() {
  for (let i = 0; i < 24; i++) {
    let str = i
    if (i < 10) {
      str = '0' + str
    } else {
      str = '' + str
    }
    hours.value.push(str)
  }
  for (let i = 0; i < 60; i++) {
    let str = i
    if (i < 10) {
      str = '0' + str
    } else {
      str = '' + str
    }
    minutes.value.push(str)
  }
}
const weekdayNames = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];

function getWeekday(date) {
  const weekday = dayjs(date).day();
  return weekdayNames[weekday];
}

console.log(getWeekday('2022-12-25'));
async function  getLastYearToTodayDates() {
  let today = new Date()
  let startDate = new Date(today.getFullYear(), 0, 1)
  let dates = []
  let last=  new Date(dayjs().add(7, 'day').format())
  console.log(last)
  console.log(today)
  todayDate.value = formatDate(Date.now(), 'YYYY-MM-DD')
  while (today <= last) {
    let date1 = formatDate(today, 'MM月DD日')
    let date2 = formatDate(today, 'YYYY-MM-DD')
    let week=await getWeekday(date2)
    let data3=date1+' '+week
    dates.push({ label: data3, value: date2 })
    today.setDate(today.getDate() + 1)
  }
  return dates
}
function bindDateChange(e) {
  let value = e.detail.value
  currentDate.value = dates.value[value[0]].value
  time.value = `${hours.value[value[1]]}:${minutes.value[value[2]]}`
  let newStr = `${currentDate.value} ${time.value}`
  let labelStr = dates.value[value[0]].label
  emit('changeTime', newStr, labelStr)
}

function pickerChange(e) {
  console.log(e)
}
</script>
<style>
/* .yu-datetime-picker .picker-box {
  background: #f8f2ff;
  z-index: 0;
} */
</style>

<style lang="scss" scoped>
.yu-datetime-picker {
  position: relative;
  z-index: 888;
}
.yu-datetime-view {
  width: 100%;
  height: 400rpx;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 1);
  z-index: 666;
  box-sizing: border-box;
  padding: 0 25rpx;
}

.yu-datetime-view picker-view {
  height: 100%;
}

.yu-datetime-view picker-view {
  height: 100%;
}
::v-deep .uni-picker-view-indicator {
  background: #F5F6F8;
  z-index: 0;
}
.yu-picker-column {
  -webkit-flex: 2;
  -webkit-box-flex: 2;
  flex: 2;
}
.yu-picker-column1 {
  -webkit-flex: 1;
  -webkit-box-flex: 1;
  flex: 1;
}
.yu-datetime-item {
  text-align: center;
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 34rpx;
  color: #333333;
}
.time {
  padding: 50rpx 0 50rpx 0;
  display: flex;
  justify-content: center;
  .time_info {
    font-weight: 600;
    font-size: 28rpx;
    color: #333333;
  }
}
.btnBox {
  padding: 6rpx 0;
  .con_btn {
   width: 700rpx;
   height: 88rpx;
   background: #00C1B9;
   border-radius: 44rpx;
    text-align: center;
    line-height: 86rpx;
    color: #fff;
    margin: 0 auto;
    font-weight: 500;
    font-size: 28rpx;
    color: #ffffff;
  }
}
</style>
